<template>
  <div>
    <el-button @click="goBack">返回</el-button>
  </div>
  <div style="margin-top: 20px;margin-bottom: 20px;">
    <el-select v-model="warehouseId" clearable>
      <el-option :label="item.name" :value="item.id" v-for="(item, index) in selectArr" :key="index" />
    </el-select>
    <el-button type="primary" @click.prevent="baohuoList" style="margin-left: 20px;">
      生成报货单
    </el-button>
    <span v-if="numAndMoneyOr" style="margin-left: 20px;">总件数：{{ }}</span><span v-if="numAndMoneyOr">总金额：{{ }}</span>
  </div>
  <div>
    <ul style=" display: flex;flex-wrap: wrap; ">
      <li style="padding: 7px;margin: 4px;" class="list" v-for="(item, index) in tableList" :key="index">
        <el-image style="width: 100px; height: 100px" :src="item.orderPicPath" />
        <div style="margin-left: 6px;">
          <p>sku标题：{{ item.orderSkuPropertiesName }}</p>
          <p>数量：{{ item.orderNum }}</p>
          <p>拿货价：{{ item.purchasePrice }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { advanceSendOrderGetGearOpenList, advanceSendOrdergetReportGoodList, getReportGoodSumInfo } from '@/api/index'
onBeforeMount(() => {
  advanceSendOrderGetGearOpenList().then(res => {
    const { data: { data } } = res

    selectArr.value = data
    selectArr.value.shift()
    console.log(data)
  })
})

const selectArr = ref([])
const warehouseId = ref('')
const goBack = () => {
  window.history.go(-1)
}
const numAndMoney = ref({})
const numAndMoneyOr = ref(false)
const tableList = ref([])
const baohuoList = () => {
  getReportGoodSumInfo({
    id: warehouseId.value
  }).then(res => {
    const { data: { data } } = res
    console.log(data)
    numAndMoneyOr.value = true
    numAndMoney.value = data
  })
  advanceSendOrdergetReportGoodList({
    id: warehouseId.value
  }).then(res => {
    const { data: { data } } = res
    console.log(data)
    tableList.value = data
  })
}
</script>

<style lang='less' scoped>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.list {
  width: 400px;
  border: 1px solid #000;
  display: flex;
  align-items: center
}
</style>
